<template>
  <div>
    <ContentTable>
      <template #menu>
        <div class="menus">
          <div class="menus-item">
            <div class="menus-items">
              <el-select v-model="inf.value" @change="getChange" placeholder="请选择" style="width: 140px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input v-model="inf.key" :disabled="inf.active" placeholder="输入关键字" clearable :suffix-icon="Search" />
            </div>
            <div class="block">
              <el-date-picker v-model="inf.DataTime" type="daterange" clearable range-separator="-" start-placeholder="活跃开始时间" end-placeholder="活跃结束时间" />
            </div>
            <el-button type="primary" @click="getData">搜索</el-button>
          </div>
        </div>
      </template>
      <div class="table">
        <el-table :data="tableData" border stripe style="width: 48%">
          <el-table-column label="时间" prop="date" />
          <el-table-column label="行为" prop="name" />
          <el-table-column label="其他" prop="name" />
        </el-table>
        <el-table :data="tableData1" border stripe style="width: 48%">
          <el-table-column label="时间" prop="date" />
          <el-table-column label="老状态" prop="name" />
          <el-table-column label="新状态" prop="name" />
        </el-table>
      </div>
    </ContentTable>
    <div class="pagination">
      <el-pagination size="small" background layout="total, prev, pager, next, jumper, sizes" v-model:current-page="inf.page" v-model:page-size="inf.size" :total="inf_res.total" @current-change="getData" @size-change="getData" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElTable, ElTableColumn, ElPagination, ElButton, ElInput, ElAvatar, ElTag, ElPopover, ElIcon } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const inf = ref({
  value: '',
  key: '',
  DataTime: '',
  page: 1,
  size: 10,
  active: true,
  export: true,
})
const inf_res: any = ref({
  total: 0,
})

const options = [
  {
    value: 'name',
    label: '名字',
  },
  {
    value: 'showid',
    label: 'showid',
  },
  {
    value: 'UID',
    label: 'UID',
  },
]

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableData1 = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const getData = () => {
  let _inf = JSON.parse(JSON.stringify(inf.value))
  console.log(_inf)
  // userApi.usersGet({ params: _inf }).then((res) => {
  //   const { code = 0, msg, data } = res
  //   if (code === 200) {
  //     inf_res.value = data
  //   }
  // })
}
// 没有选择不能输入
const getChange = (value: string) => {
  if (value) {
    inf.value.active = false
  } else {
    inf.value.active = true
  }
}
</script>
<style scoped lang="scss">
.menus {
  padding: 20px;
  display: flex;
  align-items: center;
  .menus-item {
    display: flex;
    align-items: center;
    gap: 10px;
    .menus-items {
      display: flex;
    }
  }
}
.table {
  padding: 5px;
  display: flex;
  justify-content: space-around;
}
.pagination {
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
